<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CSS padding style</title>
<style type="text/css" media="screen">
  * {padding: 0;
  margin: 0;}
    .paddingtop th {padding-top: 2em;}
    .paddingtop td {padding-bottom: 5cm;}
    .paddingright {background-color:gray; }
    .paddingright th {padding-right: 150px;;text-align: right;}
    .paddingright td {padding-left: 40%;text-align: left;}
</style>
</head>

<body>
<b style="">## 上下内边距-padding-top、bottom</b>
<table class="paddingtop" border="1px">
  <tr>
    <th>Test-top</th>
  </tr>
  <tr>
    <td>Gates-top</td>
  </tr>
</table><br>

<hr>
<br>
<b style="">#右右内边距-padding-right、left</b>

<table class="paddingright" border="1px">
  <tr>
    <th>Test1-gright</th>
  </tr>
  <tr>
    <td>Gates1-gright</td>
  </tr>
</table>
<br>
<br>
<hr>
<br>
<br>
<b style="color:blue;">padding attribute</b><br>
<div style="border:2px dashed green;width:200px;height:200px;">
  <p style="padding: 20%;background-color: rgba(78,135,28,0.5);border:1px solid black;width:50px;height:50px;">Test 20 %</p>
  <!--<p style="padding: 2em 0px 30% 2cm;background-color: rgba(78,135,28,0.5);border:1px solid black;width:50px;height:50px;">Test</p>
--></div>

<br>
<br>
<hr>
<hr>
<br>
<br>
<b style="color:maroon;">margin all attribute</b>
<style type="text/css" media="screen">
  p.margintest {
    border: 1px dashed black;margin: 0.25in 10% 2cm 1em;background-color: rgba(255, 120, 10, 0.5);
    }
    p.margint {margin: auto auto auto 20px;}
</style>
<p>this is a p element!!</p>
<p class="margintest">this is a p element!! and Class = "margintest"</p>
<p>this is a p element!!</p>
<p class="margint">this is a p element!! and Class = "margintest"</p>
<p>this is a p element!!</p>

<br>
<hr>
<br>
<b style="color:fuchsia">margin top/right/bottom/left</b>
<style type="text/css" media="screen">
  p.top {margin-top: 0.25in;border: 1px solid red;background-color: rgba(95,45,212,0.5)}
  p.right {margin-right: 10%;border: 1px solid red;background-color: rgba(85,245,212,0.5)}
  p.bottommargin {margin-bottom: 25px;border: 1px solid red;background-color: rgba(45,245,12,0.5)}
  p.leftmargin {margin-left: 2.5cm;border: 1px solid red;background-color: rgba(145,45,12,0.5)}
</style>
<p>这个段落没有指定外边距。</p>
<p class="top"> Margin top</p>
<p>这个段落没有指定外边距。</p>

<p>这个段落没有指定外边距。</p>
<p class="right">margin right</p>
<p>这个段落没有指定外边距。</p>

<p>这个段落没有指定外边距。</p>
<p class="bottommargin">margin-bottom</p>
<p>这个段落没有指定外边距。</p>

<p>这个段落没有指定外边距。</p>
<p class="leftmargin">margin left</p>
<p>这个段落没有指定外边距。</p>

<br>
<br>
<hr>
<br>
<br>
<b></b>
<p></p>
<p></p>



</body>
<html>
